<!--suppress ALL -->
<template>
  <div class="page" data-page="layer2D" style="z-index: 2;">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left" @click=$root.backToTab() style="z-index: 2;"> 
            <a href="#" class="link">
              <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
            </a>
        </div>
        <div class="title sliding" style="left: -29px;">分层图列表</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content layer2D-content infinite-scroll-content" @infinite="loadMore">
        <div class="row layer2D-top">
          <div class="link col item-title" id="unit_piker_2d">
            <span>联网单位</span>
            <i class="select-down"></i>
          </div>
          <div class="link col item-title"  id="build_select_2d">
              <span>建筑物</span>
              <i class="select-down"></i>
          </div>
        </div>
        <div class="block block-strong" id="layer2D_list">

        </div>
        <div class="preloader infinite-scroll-preloader" id="layer2D_preloader"></div>
    </div>
  </div>
</template>
<style scoped>

  .layer2D-top{
    padding-top: 5px;
  } 
  .layer2D-top .col{
    margin: 10px auto;
    font-size: 14px;
    text-align: center;
  }   
  .layer2D-top .col i{
    font-size: 14px;
  }   
  .layer2D-content .block-strong{
    margin-top: 0px;
  }
  #layer2D_list a{
    display: inline-block;
    width: 100%;
    font-size: 14px;
  }
  .build-sheet-modal .list{
    margin: 0px;
  }
  .item-title span{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .every-layer-list{
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .every-layer-list-pic{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .layer2D-content .block-strong:after{
    height: 0px !important;
  }
</style>
<script>  
  return{
      data: function () {
        return {
            unitType:"", //1单 //2多
            currentOrgId:this.$route.params.organizationIds,
            currentBuildId:0,
            pageIndex:0,
            pageSize:25,
            isNoLoadMore:true,
            width:screen.width - 32,
        }    
      },
      methods: {
          loadMore:function(){
            if (this.isNoLoadMore) {
                this.pageIndex++;
                this.getLayeredGraphListData();
            }
          },
          //获取分层图数据
          getLayeredGraphListData:function(){
            common.loading(1);
            var self = this;
            var $ = self.$;
            Dao.getLayeredGraphList({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                organizationIds:self.currentOrgId,
                fbsId:self.currentBuildId,
                queryType:1,
                pageIndex:self.pageIndex,
                pageSize:self.pageSize,
            },function(data){
                if(data && data.length > 0){
                  for(var i=0;i<data.length;i++){
                      $("#layer2D_list").append(`
                        <a href="/layer2dDetail/`+data[i].id+`/1/`+ data[i].id +`/`+encodeURIComponent(data[i].layeredGraphUrl)+`/" class="link-item">
                          <div>
                            <div class="every-layer-list">
                              <img src="`+data[i].layeredGraphUrl+`?imageView2/0/w/`+self.width+`/" class="every-layer-list-pic"  alt="">
                            </div>
                            <p>`+common.transNullundefined(data[i].name)+`</p>
                          </div>
                      </a>`);
                  }
                } else {
                  if(0 === self.pageIndex){
                    $("#layer2D_list").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                  }
                }
                common.loading(0);
                if (data.length < self.pageSize){
                    self.isNoLoadMore = false;
                    $("#layer2D_preloader").hide();
                }
            },function(e) {
                common.loading(0);
                app.methods.showToastBottom("获取联网单位列表失败");
            },false);
          },

      },
      on: {
          pageInit: function(e, page) {
              var self = this;
              var app = self.$app;
              jQuery("#unit_piker_2d .select-down").show();
              //判断是单、多联网单位
              //单
              if (userInfor.isMuilUnitUser == 0){
                  jQuery("#unit_piker_2d").hide();
                  self.currentOrgId = userInfor.organizationIds;//单联网单位下通过选择探测器实时状态进入
                  jQuery("#unit_piker_2d span").html(userInfor.org.name);
              }else{
                  //是多联网角色切换到单的
                  if(isChangeUnitRole){
                      jQuery("#unit_piker_2d").hide();
                      jQuery("#unit_piker_2d span").html(single_OrgName);
                      self.currentOrgId = single_Orgid;
                  }else{
                      var currentOrgName = currentUserUnitListData[0].shortName;
                      if(!self.currentOrgId){
                          self.currentOrgId = currentUserUnitListData[0].organizationId;
                      }else{
                          if(self.currentOrgId.split(",").length>2){
                              currentOrgName = searchUnitNameById[self.currentOrgId.split(",")[0]].shortName;
                              self.currentOrgId = self.currentOrgId.split(",")[0];
                          }else{
                              currentOrgName = searchUnitNameById[self.currentOrgId].shortName;
                          }
                      }
                      
                      $("#unit_piker_2d span").html(currentOrgName);
                      //多联网单位
                      $("#unit_piker_2d").show().click(function(event) {
                        loadSelectUnitFunc(function(data){
                          self.currentOrgId = data.orgId;
                          self.currentBuildId = 0;
                          $("#build_select_2d span").html('建筑物');
                          $("#unit_piker_2d span").html(data.orgName);
                          self.pageIndex = 0;
                          $("#layer2D_list").empty();
                          self.getLayeredGraphListData();
                        });
                      });
                  }
              }

              $("#build_select_2d").show().click(function(event) {
                  loadSelectBuildFun(self.currentOrgId,function(data){
                    self.currentBuildId = data.buildId;
                    $("#build_select_2d span").html(data.buildName);
                    self.pageIndex = 0;
                    $("#layer2D_list").empty();
                    self.getLayeredGraphListData();
                  },true);
              });

              self.getLayeredGraphListData();
          }
      }
  }
</script>